//
// DocHeader
//

@docheader-text: rgb(45, 45, 45);
@docheader-bg: #eee;
@docheader-border: rgb(195, 195, 195);

#typo3-docheader {
	background: @docheader-bg;

	img,
	input {
		cursor: pointer;
	}

	.t3-icon {
		margin-bottom: 3px;
	}

	// left col
	.left {
		&:extend(.pull-left);
		.t3-icon {
			margin-right: 6px;
		}
	}
	// right col
	.right {
		&:extend(.pull-right);
		.t3-icon {
			margin-left: 6px;
		}
	}

	// Extra margin 6px added to it-icon margin, doubled spacing = 12px
	.buttongroup {
		float: left;
		margin-right: 6px;
		.c-inputButton {
			color: inherit;
		}
	}

	select {
		margin-right: 12px;
	}

	a {
		color: @docheader-text;

		&:hover {
			color: #000;
		}
	}

	.typo3-docheader-functions,
	.typo3-docheader-buttons {
		color: @docheader-text;
		overflow: hidden;
		padding: 0 24px;
	}

	// first row
	.typo3-docheader-functions {
		height: 27px;
		line-height: 27px;

		// overwrite defaults from normalize.css
		select {
			color: @docheader-text;
		}
	}

	// second row
	.typo3-docheader-buttons {
		height: 22px;
		padding-top: 3px;
		padding-bottom: 3px;
		border-bottom: 1px solid #C3C3C3;
	}
}

//
// ExtJS Viewport
//

//
// Collapsed tree frame is not invisible, but 5px wide.
// If no tree frame is in use, an empty container is shown instead
//

#typo3-navigationContainer-xsplit,
#typo3-navigationContainer-xcollapsed,
#typo3-navigationDummy {
	background: @body-bg url(../../Images/docheader-split-background.png) left top repeat-x;
}


// override the ExtJS collapse page tree button
// -------------------------

@module-menu-border-color-lighter: #F5F5F5;
@module-menu-border-color-light: #C3C3C3;

#typo3-navigationContainer-xcollapsed {
	width: 24px!important;
	&:before {
		content: "";
		position: absolute;
		top: 0;
		width: 8px;
		height: 100%;
		background-color: lighten(@module-menu-bg,25%);
		border-right: 1px solid lighten(@module-menu-border-color,20%);
		border-left: 1px solid @module-menu-border-color;
		.box-shadow(3px 0 0 rgba(0,0,0,0.15));
	}
}

// center collapse button vertical
.x-panel-body {
	.x-layout-cmini-west .x-layout-mini,
	.x-layout-split-west .x-layout-mini {
		top: 50%;
		margin-top: -40px;
	}
}


// styling for the page tree collapse button
// this class will be extended from ExtJS CSS Class setup (ExtJS close and open html setup)
.typo3-btn-collapse-page-tree {
	height: 80px;
	width: 14px;
	border-top-right-radius: 3px;
	border-bottom-right-radius: 3px;
	background: none;
	border: 1px solid @module-menu-border-color-light;
	border-left: 1px solid @module-menu-border-color-lighter;
	display: block;
	font-size: 0;
	.opacity(1);
	&:after {
		font-family: 'FontAwesome';
		content: "\f0d9";
		position: absolute;
		top: 50%;
		display: block;
		width: 100%;
		margin-top: -1px;
		color: #000;
		font-size: 12px;
		vertical-align: middle;
		text-align: center;
	}
}

// close page tree button
.x-layout-split-west .x-layout-mini {
	&:extend(.typo3-btn-collapse-page-tree all);
	margin-left: -2px;
	background-color: @module-menu-border-color-lighter;
	&:hover {
		background-color: darken(@module-menu-border-color-lighter,5%);
	}
}

// open page tree button
.x-layout-cmini-west .x-layout-mini {
	&:extend(.typo3-btn-collapse-page-tree all);
	background-color: lighten(@module-menu-bg, 25%);
	margin-left: 7px;
	border: 1px solid lighten(@module-menu-border-color, 20%);
	border-left: 0;

	&:hover {
		.opacity(1);
		background-color: lighten(@module-menu-bg,30%);
	}
	&:after {
		margin-top: -9px;
		color: #fff;
		content: "\f0da";
	}
}



//
// ExtJS theme for PageTree
//
#typo3-pagetree-topPanelItems {
	background: @docheader-bg;

	#typo3-pagetree-topPanel {

		.x-panel-body-noborder {
			border-bottom: 1px solid @docheader-border;
		}

		// Functions
		.x-panel-tbar {
			color: @docheader-text;
			a {
				color: @docheader-text;
				&:hover {
					color: #000;
				}
			}
		}

		// Buttons
		.x-panel-body {
			color: @docheader-text;
			.typo3-pagetree-topPanel-button {
				margin-top: 0;
			}
			a {
				color: @docheader-text;
				&:hover {
					color: #000;
				}
			}
		}
	}

}
